<template>
  <div>
    <div class="tab1">
      <center>
      <!-- 表格 -->
      <el-table   ref="multipleTable" :data="sea.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width:1100px">
            <el-table-column
              type="selection"
              :id="list.appointId"
              v-model="list.appointId"
              align="center" 
            >
            </el-table-column>
        <el-table-column prop="user_id"   label="编号"  width="50px"  align="center" 
        ></el-table-column>
        <el-table-column prop="user_name" label="签约人姓名" width="100px" align="center" >
        </el-table-column>
        <el-table-column prop="user_cardId" label="身份证号" width="170px" align="center" >
        </el-table-column>
        <el-table-column prop="user_phone" label="手机号码" width="120px" align="center" >
        </el-table-column>
        <el-table-column prop="sign_team" label="签约医生团队" align="center"   width="120px" :formatter="intpenDocter">
        </el-table-column>
        <el-table-column prop="signDoctor" label="签约医生" align="center" >
        </el-table-column>
        <el-table-column prop="serve_page" label="服务包"  align="center"  :formatter="intpenPage">
        </el-table-column>
        <el-table-column prop="contract_state" label="签约状态" :formatter="intpenStatus" align="center" >
        </el-table-column>
        <el-table-column prop="end_time" label="到期时间" align="center"  width="120px">
        </el-table-column>
        <el-table-column  label="操作" width="130px" align="center" >
          <template slot-scope="scope">
              <el-button
                @click="handleClick3(scope.row)"
                type="text"
                size="small"
                style="font-size:13px;"
                >查看详情</el-button
              >
              <el-button
                @click="handleClick4(scope.row)"
                type="text"
                size="small"
                style="font-size:13px;"
                >续约</el-button
              >
            </template>
        </el-table-column>
         
      </el-table>
     </center>
      <br />
      <!-- 分页-->
      <center>
        <!-- 分页器 -->
          <div class="block" style="margin-top: 15px">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="sea.length"
            >
            </el-pagination>
          </div>
      </center>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import redactServiceMessage from '@/views/Serve/redactServiceMessage.vue';
axios.defaults.baseURL="http://localhost:8080"
export default {
  components: { redactServiceMessage },
  props: {
    sea:{
      type:Array
    }
  },
  data() {
    return {
      list: [],
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页的数据条数
    };
  },
  methods: {
    //签约状态处理
    intpenStatus(row, column, cellValue, index) {
         if (cellValue ===4){
             return <font color="blue">生效中</font>;
         }else if (cellValue ===5){
             return <font color="gray">已过期</font>;
         }
     },
    //医生团队处理
    intpenDocter(row, column, cellValue, index) {
         if (cellValue ===1){
             return 'A团队';
         }else if (cellValue ===2){
             return 'B团队';
         }else if (cellValue ===3) {
             return 'C团队';
         }
     },
     //签约服务包处理
     intpenPage(row, column, cellValue, index) {
         if (cellValue ===1){
             return '基础包';
         }else if (cellValue ===2){
             return '老年人服务包';
         }else if (cellValue ===3) {
             return '儿童服务包';
         }else if (cellValue ===4) {
             return '定制包';
         }
     },
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        //   alert(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
    handleClick3(row) {
      this.$router.push({
        path:'/sign05',
        query: {
          id: row.user_id,
        },
      });
    },
    handleClick4(row) {
      this.$router.push({
        path:'/sign06',
        query: {
          id: row.user_id,
        },
      });
    },
  },

  
};
</script>

<style>
.tab1 {
 margin-top: 200px;
}
a{
  text-decoration: none;
}
.chakna2{
  color: blue;
}
</style>